<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
<div id="app"></div>

<!-- react核心库 -->
<script src="../lib/react.development.js"></script>
<!-- react操作dom -->
<script src="../lib/react-dom.development.js"></script>
<!-- jsx转js -->
<script src="../lib/babel.min.js"></script>
<script type="text/babel">
  class Login extends React.Component {
    state = {
      username: '',
      password: ''
    }

    handleSubmit = (e) => {
      e.preventDefault()
    }

    /**
     * 传入字段名，返回一个统一处理的函数，由react回调
     *
     * @param field
     * @returns {(function(*): void)|*}
     */
    saveFormData = (field) => {
      return (e) => {
        this.setState({[field]: e.target.value})
      }
    }

    render() {
      return (
        <form action="https://baidu.com" onSubmit={this.handleSubmit}>
          <div>您好，{this.state.username}</div>
          <input type="text" onChange={this.saveFormData('username')} name="username" placeholder="用户名"/><br/>
          <input type="password" onChange={this.saveFormData('password')} name="password" placeholder="密码"/><br/>
          <button type="submit">登录</button>
        </form>
      )
    }
  }

  ReactDOM.render(<Login/>, document.getElementById("app"))
</script>
</body>
</html>